<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        姓：<input type="text" v-model="firstName"> <br>
        名：<input type="text" v-model="lastName"> <br>
        全名：<span>{{firstName+lastName}}</span>
        全名：<span>{{firstName}}-{{lastName}}</span>

       <!-- 计算属性 使用的时候不能+括号 -->
       <hr>
        {{fullName}}
        {{fullName01()}}

    </div>
    
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                firstName:'张',
                lastName:'三'
            }
        },
        methods:{
            fullName01(){
                return this.firstName + "#####" + this.lastName;
            }
        },
        //计算属性
        computed:{
            //写一些方法来作为计算后得到的属性
            fullName(){
                
                return this.firstName + "****" + this.lastName;
            }
        }
    });
</script>

<!-- 
    计算属性：
    要使用的属性不存在，需要通过已有的属性进行计算得来
    使用方式和methods中定义函数类似 只不过使用时不需要括号
    methods也能实现效果，计算属性computed内部有缓存机制，效率更高
 -->